<template>
	<div ref="componentRoot" :class="$style['time-component-container']">
		<div :class="$style['hours-container']">
			<div :key="item" v-for="item of 13" class="component-hours_item">
				<span v-if="item === 1"></span>
				<span v-else>{{ (item - 1) * 2 - 2 < 10 ? '0' : '' }}{{ (item - 1) * 2 - 2 }}</span>
			</div>
		</div>
		<div class="component-days">
			<div :key="index" v-for="(item, index) of dateArray" class="day_box_item">
				<span class="day_box_week">{{ weekArray[index] }}</span>
				<div class="time_size">
					<el-tooltip :key="iindex" v-for="(iitem, iindex) in item" :content="iitem[0] + '-' + iitem[1]"
						placement="top">
						<div class="cur-pointer" :style="{
		left: getSize(iitem).l,
		width: getSize(iitem).w,
	}">
						</div>
					</el-tooltip>
				</div>
				<div class="day_time_select" v-if="toolShow">
					<el-icon :size="13" color="#0000e6" @click="addItem(index)">
						<Plus />
					</el-icon>
					<el-icon :size="13" color="#cc0000" @click="removeItem(index)">
						<Delete />
					</el-icon>

				</div>

			</div>
			<div :key="item" v-for="item of 14" :style="{
		position: 'absolute',
		width: '1px',
		height: (componentHight - 25) + 'px',
		left: getLeft(item),
		background: 'rgba(47,125,241,.12)',
	}"></div>
		</div>
		<el-dialog v-model="addShow" title="添加时间段" :close-on-click-modal="false" :close-on-press-escape="false"
			:width="400">
			<el-time-picker v-model="dateTimeArray" is-range range-separator="-" start-placeholder="开始时间"
				end-placeholder="结束时间" format="HH:mm:ss" value-format="HH:mm:ss" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="addShow = false">取消</el-button>
					<el-button type="primary" @click="addItemSubmit">确认</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const componentRoot = ref(null)
const componentWidth = ref(0)
const componentHight = ref(0)
const itemWidth = ref(0)

onMounted(() => {
	componentWidth.value = componentRoot.value.offsetWidth
	componentHight.value = componentRoot.value.offsetHeight
	itemWidth.value = componentWidth.value / 14
})
const weekArray = ref(['周日', '周一', '周二', '周三', '周四', '周五', '周六'])
const dateArray = ref([[], [], [], [], [], [], []])
const getLeft = index => {
	let left = 0
	left = itemWidth.value * index
	return left + 'px'
}
const getSize = item => {
	!item[0] && (item[0] = '')
	!item[1] && (item[1] = '')
	let max = 24 * 60 * 60
	let l = item[0].split(':')
	let begin = l[0] * 60 * 60 + l[1] * 60 + (l[2] - 0)
	l = item[1].split(':')
	let end = l[0] * 60 * 60 + l[1] * 60 + (l[2] - 0)
	return {
		w: ((end - begin) / max) * 100 + '%',
		l: (begin / max) * 100 + '%'
	}
}
const removeItem = index => {
	ElMessageBox.confirm(
		'确定要删除当前选中的时间段?',
		'提示',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(() => {
		dateArray.value[index] = []
		ElMessage.success('删除成功')
	})
}
const addShow = ref(false)
const dateTimeArray = ref([])
const dateIndex = ref(0)
const addItem = (index) => {
	dateIndex.value = index
	addShow.value = true
}
const addItemSubmit = () => {
	console.log('1', dateTimeArray.value)
	if (!dateTimeArray.value[0] || !dateTimeArray.value[1]) {
		ElMessage.error('请选择时间')
		return
	}
	let item = dateArray.value[dateIndex.value]
	item.push(dateTimeArray.value)
	dateArray.value[dateIndex.value] = item
	dateIndex.value = 0
	addShow.value = false
}
const toolShow = ref(true)
defineExpose({
	dateArray,
	toolShow
})
</script>
<style lang="scss" module>
.time-component-container {
	flex: 1;
	background: #ccc;
}

.hours-container {
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	background: rgba(47, 125, 241, 0.12);
	height: 25px;
	line-height: 25px;
}
</style>
<style>
.component-hours_item {
	width: calc(100% / 14);
	color: #535862;
	text-align: left;
}

.component-days {
	width: 100%;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid rgba(47, 125, 241, 0.12);
	position: relative;
}

.day_box_item {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	box-sizing: border-box;
}

.day_box_week {
	text-align: center;
	height: 30px;
	line-height: 30px;
	width: calc(100% / 14);
}

.time_size {
	width: calc((100% / 14) * 12);
	display: flex;
	flex-wrap: nowrap;
	position: relative;
}

.day_time_select {
	width: calc(100% / 14);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 0 10px;
	cursor: pointer;
}

.cur-pointer {
	cursor: pointer;
	cursor: -ms-pointer;
	height: 25px;
	position: absolute;
	top: 2px;
	background: #0398fc;
	text-align: center;
	z-index: 99;
}
</style>
